<template>
  <div class="div">
    <el-upload
      ref="upload"
      action="#"
      list-type="picture-card"
      :limit="fileNum"
      :on-exceed="exceeds"
      :on-change="changeUpload"
      :on-remove="handleRemove"
      :file-list="fileList"
      :class="{hide:hideUpload}"
      :auto-upload="false"
      :before-upload="beforeAvatarUpload"
    >
      <i slot="default" class="el-icon-plus" />
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
      </div>
    </el-upload>
  </div>
</template>
<script>
import { policy } from "@/api/policy";
import $ from "jquery";
export default {
  props: {
    fileList: Array,
    fileNum: Number,
    width: "",
    height: "",
    //   hideUpload:Boolean,
    required: true,
  },
  data() {
    return {
      changes: true,
      hideUpload: false,
      imgUrl: "",
      imgFlag: [],
      aliyunOssToken: [],
    };
  },
  created() {
    this.getPolicy();
  },
  methods: {
    // 获取签名
    getPolicy() {
      policy().then((res) => {
        // console.log(res)
        this.aliyunOssToken = res.data.data;
        this.imgUrl = res.data.data.host;
        var imgUrlPrefix = this.aliyunOssToken.host;
        var dir = this.aliyunOssToken.dir;
        sessionStorage.setItem("imgUrlPrefix", imgUrlPrefix);
        sessionStorage.setItem("dir", dir);
      });
    },
    // 图片上传限制提示
    exceeds() {
      this.$message.error("不能上传了");
    },
    // 图片上传改变时
    changeUpload(file, fileList) {
      if (fileList.length >= this.fileNum) {
        this.changes = true;
      } else {
        this.changes = false;
      }
      this.hideUpload = fileList.length >= this.fileNum;
      // console.log(file, fileList);
    },
    // 图片移除时
    handleRemove(file, fileList) {
      if (fileList.length >= this.fileNum) {
        this.changes = true;
      } else {
        this.changes = false;
      }
      this.hideUpload = fileList.length >= this.fileNum;
      console.log(fileList);
    },
    changeStatus() {
      return this.changes;
    },
    beforeAvatarUpload(file) {
      // console.log(this.accept);
      // console.log(this.datas)
      // console.log(this.$refs)
      if (this.accept !== undefined) {
        if (this.accept.indexOf(file.name.split(".")[1]) == -1) {
          // 不在接收范围内
          this.$message.error("文件类型不对");
          return false;
        }
      }

      if (this.width) {
        var that = this;
        const isSize = new Promise(function (resolve, reject) {
          // let width = that.width;
          // let height = that.height;
          const _URL = window.URL || window.webkitURL;
          const image = new Image();
          console.log(image);
          console.dir(image.width);
          image.onload = function () {
            const valid =
              image.width == that.width && image.height == that.height;
            console.log("width", that.width);
            console.log("height", that.height);
            console.log("valid", valid);
            console.log("image.width", image.width);
            console.log("image.height", image.height);
            valid ? resolve() : reject();
          };
          image.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          (err) => {
            console.log("err", err);
            if (!err) {
              // this.$message.error("图片尺寸限制最小为1080 x 1920");
              this.$message.error(
                "图片尺寸限制为" + that.width + "*" + that.height
              );

              return Promise.reject();
            }
            console.log("width", that.width);
            console.log("height", that.height);
            // console.log(that.width);
            // let image = new Image();
            // let valid =
            //   image.width >= that.width && image.height >= that.height;

            // // console.log("valid", valid);
            console.log("image.width", image.width);
            // if (valid) {
            //   return Promise.reject();
            // } else {
            //   this.$message.error("图片尺寸限制最小为1080 x 1920");
            // }
            // this.$message.error("图片尺寸限制最小为1080 x 1920");
            // return Promise.reject();
          }
        );

        return isSize;
      }
    },
    // 字符串截取
    getCaption(obj) {
      var index = obj.lastIndexOf(".com");
      obj = obj.substring(index + 4, obj.length);
      return obj;
    },
    // 图片上传
    submitUpload() {
      this.imgFlag = [];
      const _self = this;
      const oldList = [];
      const newList = [];
      // console.log(oldList)
      // console.log(newList)
      for (var i = 0; i < this.$refs.upload.uploadFiles.length; i++) {
        if (this.$refs.upload.uploadFiles[i].name) {
          newList.push(this.$refs.upload.uploadFiles[i]);
        } else {
          oldList.push(this.$refs.upload.uploadFiles[i]);
        }
      }
      for (var k = 0; k < oldList.length; k++) {
        this.imgFlag.push(this.getCaption(oldList[k].url));
      }
      if (newList.length > 0) {
        for (let k = 0; k < newList.length; ++k) {
          var file = newList[k].name;
          var getSuffix = function (fileName) {
            var pos = fileName.lastIndexOf(".");
            var suffix = "";
            if (pos != -1) {
              suffix = fileName.substring(pos);
            }
            return suffix;
          };
          // 利用时间戳生成uuid
          var d = new Date().getTime();
          if (
            window.performance &&
            typeof window.performance.now === "function"
          ) {
            d += performance.now(); // use high-precision timer if available
          }
          var uuid = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx".replace(
            /[xy]/g,
            function (c) {
              var r = (d + Math.random() * 16) % 16 | 0;
              d = Math.floor(d / 16);
              return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
            }
          );
          // 定义文件名
          var filename = uuid + getSuffix(file);
          // 注意formData里append添加的键的大小写
          var formData = new FormData();
          // 存储在oss的文件路径
          formData.append("OSSAccessKeyId", _self.aliyunOssToken.accessid);
          // accessKeyId
          formData.append("key", _self.aliyunOssToken.dir + "/" + filename);
          // policy
          formData.append("policy", _self.aliyunOssToken.policy);
          // 签名
          // 如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
          formData.append("Signature", _self.aliyunOssToken.signature);
          // 文件详情
          formData.append("file", newList[k].raw);
          // 成功后返回的操作码
          formData.append("success_action_status", 200);
          var url = _self.aliyunOssToken.host;
          var fileUrl =
            _self.aliyunOssToken.host +
            "/" +
            _self.aliyunOssToken.dir +
            "/" +
            filename;
          this.imgFlag.push("/" + _self.aliyunOssToken.dir + "/" + filename);
          $.ajax({
            url: url,
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
              // debugger
              // console.log(fileUrl);
              console.log("-");
              console.log(data);
              console.log("-");
            },
            error: function (data) {
              console.log("=");
              console.log(data);
              console.log("=");
            },
          });
        }
      }
      return this.imgFlag;
    },
  },
};
</script>
<style scoped>
.div,
.div > div {
  display: inline;
}
</style>
